<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>自定义事件</title>
    </head>
    <body>

        <div id="root">
            <p>{{ counter }}</p>
            <!-- 监听在子组件中发生的事件( `增加` 和 `降低` 就是子组件中触发的事件) -->
            <handler @增加="increase" @降低="decrease"></handler>
        </div>

        <!-- 导入 vue.js 3.x 核心库 -->
        <script src="../scripts/vue@3.2.31.js"></script>

        <script>
            // 定义组件
            const Handler = {
                emits: [ '增加' , '降低' ],
                data(){
                    return { amount: 5 }
                },
                template: `<p>
                               <button @click="addition">加{{amount}}</button>
                               <button @click="subtract">减{{amount}}</button>
                           </p>`,
                methods: {
                    addition(){
                        // console.log( 'addition' , this);
                        // 触发 `增加` 自定义事件 并传递数据
                        this.$emit('增加', this.amount );
                    },
                    subtract(){
                        // console.log( 'subtract' , this);
                        // 触发 `降低` 自定义事件 并传递数据
                        this.$emit('降低', this.amount);
                    }
                }
            }
            // 根组件选项
            const options = {
                data(){
                    return { counter: 1000 }
                },
                components: {
                    // 注册组件
                    'handler': Handler
                },
                methods: {
                    increase(amount){
                        this.counter += amount ;
                    },
                    decrease(amount){
                        this.counter -= amount;
                    }
                }
            }
            Vue.createApp(options).mount('#root');
        </script>
        
    </body>
</html>